import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal } from 'antd';

import { FormComponentProps } from '@ant-design/compatible/es/form';
import React, {useEffect} from 'react';
import { FormValueType } from './UpdateForm';
import * as DataHelper from '@/helpers/DataHelper';
const FormItem = Form.Item;

interface CreateFormProps extends FormComponentProps {
  modalVisible: boolean;
  itemModalVisible: boolean;
  otherValues: any;
  onSubmit: (fieldsValue: FormValueType) => Promise<any>;
  onCancel: () => void;
}

const CreateForm: React.FC<CreateFormProps> = props => {
  const { modalVisible, itemModalVisible, form, onSubmit: handleAdd, onCancel, otherValues } = props;

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      if(itemModalVisible) {
        fieldsValue.dict_id = otherValues.dictId;
      }
      handleAdd(fieldsValue).then(status => {
        status && form.resetFields();
      });
    });
  };
  return (
    <div>
      {modalVisible &&
    <Modal
      destroyOnClose
      title="新增字典"
      visible={modalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="字典名称">
        {form.getFieldDecorator('name', {
          rules: [{ required: true, message: '请输入字典名称'}],
        })(<Input placeholder="字典名称" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="字典编号">
        {form.getFieldDecorator('nickname', {
          rules: [{ required: true, message: '请输入字典编号'}],
        })(<Input placeholder="字典编号" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
        {form.getFieldDecorator('remark', {
          rules: [{ }],
        })(<Input placeholder="描述" />)}
      </FormItem>
    </Modal>
    }
    {
      itemModalVisible &&
    
    <Modal
      destroyOnClose
      title="新增字典值"
      visible={itemModalVisible}
      width={DataHelper.DEFAULT_MODAL_WIDTH}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="值名称">
        {form.getFieldDecorator('name', {
          rules: [{ required: true, message: '请输入值名称'}],
        })(<Input placeholder="值名称" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="值标识">
        {form.getFieldDecorator('nickname', {
          rules: [{ required: true, message: '请输入字典编号'}],
        })(<Input placeholder="数据值标识" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="数据值">
        {form.getFieldDecorator('item_value', {
          rules: [{ required: itemModalVisible ? true : false, message: '请输入数据值'}],
        })(<Input placeholder="数据值" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="对比值">
        {form.getFieldDecorator('dict_item_value', {
          rules: [{ required: false, message: '请输入对比值'}],
        })(<Input placeholder="对比值" />)}
      </FormItem>
      <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="描述">
        {form.getFieldDecorator('remark', {
          rules: [{ }],
        })(<Input placeholder="描述" />)}
      </FormItem>
    </Modal>
    }
    </div>
  );
};

export default Form.create<CreateFormProps>()(CreateForm);
